<template>
    <div id="repo">
        <div class="repo-left">
            <div class="repo-left-title"><i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-43"></i>Your
                Repositories</div>
            <div class="repo-filter">
                <div class="repo-filter-item" v-for="item in typeList" :class="item.value==type?'repo-filter-active':''"
                    @click="type=item.value;typeString=item.label;page=1;getRepoList()">{{item.label}}</div>
            </div>
            <div class="repo-left-title"><i class="iconfont icon-time2"></i>Order by</div>
            <div class="repo-filter">
                <div class="repo-filter-item" v-for="item in sortList" :class="item.value==sort?'repo-filter-active':''"
                    @click="sort=item.value;page=1;getRepoList()">{{item.label}}</div>
            </div>
        </div>
        <div class="repo-right" ref="scrollView" @scroll="repoScroll">
            <div class="common-title">{{typeString}}</div>
            <div class="repo-list" v-loading="loading_repos">
                <div class="repo-item" v-for="(item,index) in repoList">
                    <div class="repo-body">
                        <div class="repo-title">
                            <router-link :to="'/'+item.full_name" class="repo-name"><i v-if="item.recommend"
                                    class="iconfont repo-verify icon-icon_certification_f"
                                    title="Gitee recommended project"></i>
                                {{item.human_name}}
                                <el-tag size="mini" type="success" effect="light" v-if="item.public">Open Source
                                </el-tag>

                            </router-link>
                            <div class="repo-more">
                                <div class="repo-star repo-more-item" title="Stars">
                                    <i class="iconfont icon-star-fill"></i>{{item.stargazers_count}}
                                </div>
                                <div class="repo-watch repo-more-item" title="Watches">
                                    <i class="iconfont icon-eye-fill"></i>{{item.watchers_count}}
                                </div>
                                <div class="repo-fork repo-more-item" title="Forks">
                                    <i class="iconfont icon-USB-fill"></i>{{item.forks_count}}
                                </div>
                            </div>
                        </div>
                        <div class="repo-desc">{{item.description}}</div>
                        <div class="repo-tags">
                            <div class="repo-update"><i class="iconfont icon-clock"></i>
                                {{helper.friendlyTime(item.updated_at)}}
                            </div>

                            <el-tag size="mini" type="info" effect="plain" v-if="item.language">
                                {{item.language}}
                            </el-tag>
                            <el-tag size="mini" type="info" effect="plain" v-if="item.license">{{item.license}}
                            </el-tag>
                        </div>
                    </div>
                </div>
                <el-empty class="common-tips" :description="loading_tips" v-if="repoList.length==0"></el-empty>
            </div>
        </div>
    </div>
</template>
<script>
    import request from "@/lib/request";
    export
        default {
            data() {
                return {
                    loading_repos: false,
                    loading_tips: "Loading ...",
                    repoList: [],
                    page: 1,
                    keyword: "",
                    type: "",
                    typeString: "All projects",
                    typeList: [
                        {
                            label: "All projects",
                            value: "",
                        },
                        {
                            label: "My own projects",
                            value: "owner",
                        },
                        {
                            label: "Personal projects",
                            value: "personal",
                        },
                        {
                            label: "My contributions",
                            value: "member",
                        },
                        {
                            label: "All open sources",
                            value: "public",
                        },
                        {
                            label: "All private projects",
                            value: "private",
                        }
                    ],
                    sort: "pushed",
                    sortList: [
                        {
                            label: "Last pushed",
                            value: "pushed"

                        },
                        {
                            label: "Last Updated",
                            value: "updated"

                        },
                        {
                            label: "Last Created",
                            value: "created"

                        },
                        {
                            label: "Project Name",
                            value: "full_name"

                        }
                    ],
                }
            },
            created() {
                this.getRepoList();
            },
            methods: {
                repoScroll(e) {
                    if (e.target.scrollTop + e.target.clientHeight + 30 > e.target.scrollHeight) {
                        if (!this.loading_repos) {
                            this.page++;
                            this.getRepoList();
                        }
                    }
                },
                reloadData() {
                    this.page = 1;
                    this.getRepoList();
                },
                getRepoList() {
                    let that = this;
                    if (that.loading_repos) {
                        return;
                    }
                    that.loading_repos = true;
                    that.loading_tips = "Loading ...";
                    request({
                        url: "/user/repos?q=" + that.keyword + "&page=" + that.page + "&sort=" + that.sort + "&per_page=20" + (that.type ? "&type=" + that.type : ""),
                        method: "GET",
                        success(res) {
                            if (that.page == 1) {
                                that.repoList = res;
                                that.$nextTick(function () {
                                    console.log(that.page)
                                    that.$refs.scrollView.scrollTop = 0;
                                });
                            } else {
                                that.repoList = that.repoList.concat(res);
                            }
                        },
                        final() {
                            that.loading_repos = false;
                            if (that.repoList.length == 0) {
                                that.loading_tips = "No Data...";
                            }
                        }
                    });
                },

            }
        }
</script>
<style>
    .repo-left-title {
        padding: 10px 0px;
        padding-left: 30px;
        font-size: 16px;
        margin-top: 20px;
    }

    .repo-left-title .iconfont {
        font-size: 20px;
        margin-right: 10px;
    }

    .repo-filter-item {
        padding: 15px;
        margin: 5px;
        padding-left: 60px;
        font-size: 14px;
        cursor: pointer;
        color: #999;
        font-weight: 300;
        border-radius: 10px;
    }

    .repo-filter-item:hover,
    .repo-filter-active {
        font-weight: bold;
        background-color: #f5f5f5;
    }

    #repo .repo-left {
        width: 250px;
        border-right: 5px solid var(--bg-color);
    }


    #repo .repo-right {
        flex-grow: 1;
        width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overflow-y: auto;
    }

    #repo .repo-list {
        flex-grow: 1;
        position: relative;
    }

    #repo .repo-item {
        text-decoration: none;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px dashed #ddd;
        padding: 10px 20px;
        margin: 10px;
    }

    .repo-name .repo-verify {
        color: #187cd5;
        margin-right: 5px;
        font-size: 18px;
        vertical-align: top;
    }

    .repo-title {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .repo-name {
        font-size: 18px;
        color: #333;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        overflow: hidden;
        flex-grow: 1;
        font-weight: bold;
    }

    .repo-desc {
        font-size: 14px;
        margin-top: 10px;
        flex-grow: 1;
        color: #999;
        font-weight: 300;
    }

    .repo-more {
        font-size: 14px;
        color: #666;
        vertical-align: middle;
        white-space: nowrap;
        padding-top: 3px;
        font-weight: 300;
    }

    .repo-more * {
        vertical-align: middle;
        font-weight: 300;
    }

    .repo-more-item {
        margin-left: 5px;
        display: inline-block;
    }


    .repo-tips {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 14px;
    }

    .repo-tips .iconfont {
        display: block;
        font-size: 48px;
        margin-bottom: 10px;
        font-weight: 200;
    }

    .repo-tags {
        margin-top: 20px;
        font-size: 12px;
        color: #ccc;
    }

    .repo-tags div {
        display: inline-block;
        font-weight: 300;
    }

    .repo-update {
        font-size: 14px;
        margin-right: 5px;
    }

    .repo-update .iconfont {
        font-weight: bold;
    }

    .repo-tag {
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 12px;
        padding: 1px 3px;
    }
</style>